<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <title>客户管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/X-admin/css/font.css">
    <link rel="stylesheet" href="/X-admin/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="/X-admin/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/X-admin/js/xadmin.js"></script>
      <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=ITFBZ-AR5LQ-U5K5L-GORA3-NNK2F-C6BG2"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
    .layui-upload-img { width: 90px; height: 90px; margin: 0; }
    .pic-more { width:100%; left; margin: 10px 0px 0px 0px;}
    .pic-more li { width:90px; float: left; margin-right: 5px;}
    .pic-more li .layui-input { display: initial; }
    .pic-more li a { position: absolute; top: 0; display: block; }
    .pic-more li a i { font-size: 24px; background-color: #008800; }    
    #slide-pc-priview .item_img img{ width: 90px; height: 90px;}
    #slide-pc-priview li{position: relative;}
    #slide-pc-priview li .operate{ color: #000; display: none;}
    #slide-pc-priview li .toleft{ position: absolute;top: 40px; left: 1px; cursor:pointer;}
    #slide-pc-priview li .toright{ position: absolute;top: 40px; right: 1px;cursor:pointer;}
    #slide-pc-priview li .close{position: absolute;top: 5px; right: 5px;cursor:pointer;}
    #slide-pc-priview li:hover .operate{ display: block;}    
    </style>
  </head>
  <body>
    <div class="x-body">
        <form class="layui-form">
          <div class="layui-form-item">
              <label for="name" class="layui-form-label">
                  <span class="x-red">*</span>店铺名称
              </label>
              <div class="layui-input-inline">
                  <input type="text" id="shopName" name="shopName" required="" lay-verify="required"
                  autocomplete="off" class="layui-input">
              </div>
              <div class="layui-form-mid layui-word-aux">
                  <span class="x-red">*</span>店铺名称
              </div>
          </div>
          <div class="layui-form-item">
              <label for="name" class="layui-form-label">
                  <span class="x-red">*</span>店铺地址
              </label>
              <div class="layui-input-inline">
                  <input type="text" id="address" name="address" lay-verify="required" class="layui-input">
              </div>
              <div class="layui-form-mid layui-word-aux">
                  <span class="x-red">*</span>店铺地址
              </div>
          </div>
          <div class="layui-form-item">
              <label for="name" class="layui-form-label">
                  <span class="x-red">*</span>经纬度
              </label>
              <div class="layui-form-mid layui-word-aux">
                  <input type = "text" id = "lng" name = "lng" placeholder="请输入经度" class="layui-input"/>
                  <input type = "text" id = "lat" name = "lat" placeholder="请输入纬度" class="layui-input"/>
                  <span class="x-red"><a target="_blank" style="color: red;" href="https://lbs.qq.com/tool/getpoint/">点我获取经纬度</a></span>
              </div>
          </div>
          <div class="layui-form-item">
              <label for="name" class="layui-form-label">
                  <span class="x-red">*</span>禁用状态
              </label>
              <div class="layui-input-inline">
                  <input type="radio" name="status" lay-filter="erweima" value="1" title="正常" checked>
                  <input type="radio" name="status" lay-filter="erweima" value="2" title="禁用" >
              </div>
          </div>
          <div class="layui-form-item">
              <label for="name" class="layui-form-label">
                  <span class="x-red">*</span>是否上门服务
              </label>
              <div class="layui-input-inline">
                  <input type="radio" name="type" lay-filter="erweima" value="1" title="开启" >
                  <input type="radio" name="type" lay-filter="erweima" value="2" title="关闭" checked>
              </div>
          </div>
          <div class="layui-form-item">
              <label for="name" class="layui-form-label">
                  <span class="x-red">*</span>店长
              </label>
              <div class="layui-input-inline">
                  <select name="staffId" lay-verify="">
                    <option value="">请选择一个店长</option>
                    {volist name="staff" id="staff"}
                    <option value="{$staff.userId}">{$staff.userName}</option>
                    {/volist}
                  </select>     
              </div>
          </div>
          <div class="layui-form-item">
              <label for="name" class="layui-form-label">
                  <span class="x-red">*</span>产品
              </label>
              {volist name="$rs" id="rs"}
              <div class="layui-input-inline">
                  <input type="checkbox" id="product" name="product" lay-filter="erweima" title="{$rs.name}" value="{$rs.id}">
                  <input type = "text" id = "lat" lay-filter="erweima" name = "shopMoney{$i}" placeholder="原价" class="layui-input"/>
                  <input type = "text" id = "lat" name = "discount{$i}" placeholder="折扣" class="layui-input"/><br/>
              </div>
              {/volist}
          </div>

            <div class="layui-form-item">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                    <legend>上传多张图片</legend>
                </fieldset>

                 <div class="layui-input-block" style="width: 70%;">
                    <div class="layui-upload">
                      <button type="button" class="layui-btn layui-btn-primary pull-left" id="slide-pc">选择多图</button>
                      <div class="pic-more">
                        <ul class="pic-more-upload-list" id="slide-pc-priview">
                        </ul>
                      </div>
                    </div>
                  </div>
            </div>

          <div class="layui-form-item">
              <label for="L_repass" class="layui-form-label">
              </label>
              <button  class="layui-btn" lay-filter="add" lay-submit="">
                  增加
              </button>
          </div>
      </form>
    </div>
    <script>
     layui.use('upload', function(){
     var $ = layui.jquery;
     var upload = layui.upload;            
     upload.render({
         elem: '#slide-pc',
         url: "{:url('Admin/Shop/upload')}",
         exts: 'jpg|png|jpeg',
         multiple: true,
         before: function(obj) {
             layer.msg('图片上传中...', {
                    icon: 16,
                    shade: 0.01,
                    time: 0
                })
         },
         done: function(res) {
            layer.close(layer.msg());//关闭上传提示窗口
             if(res.code == 0) {
                 return layer.msg(res.msg);
             }
             //$('#slide-pc-priview').append('<input type="hidden" name="pc_src[]" value="' + res.filepath + '" />');
             $('#slide-pc-priview').append('<li class="item_img"><div class="operate"><i class="toleft layui-icon"></i><i class="toright layui-icon"></i><i  class="close layui-icon"></i></div><img src="' + res.data + '" class="img" ><input type="hidden" name="pic" value="' + res.data + '" /></li>');
         }
     });
    });
    //点击多图上传的X,删除当前的图片    
    $("body").on("click",".close",function(){
        $(this).closest("li").remove();
      });
     //多图上传点击<>左右移动图片
      $("body").on("click",".pic-more ul li .toleft",function(){
        var li_index=$(this).closest("li").index();
        if(li_index>=1){
          $(this).closest("li").insertBefore($(this).closest("ul").find("li").eq(Number(li_index)-1));
        }
      });
      $("body").on("click",".pic-more ul li .toright",function(){
        var li_index=$(this).closest("li").index();
        $(this).closest("li").insertAfter($(this).closest("ul").find("li").eq(Number(li_index)+1));
      });
    </script>
    <script>
        layui.use(['form','layer'], function(){
            $ = layui.jquery;
          var form = layui.form
          ,layer = layui.layer;

          //监听提交
          form.on('submit(add)', function(data){
            //发异步，把数据提交给php
            var arr = new Array();
            $("input:checkbox[name='product']:checked").each(function(i){
                arr[i] = $(this).val();
            });
            data.field.product = arr.join(",");//将数组合并成字符串

            var aa = new Array();
            $("input[name='pic']").each(function(i){
               aa[i] = $(this).val();
            });
            data.field.pic = aa.join(",");//将数组合并成字符串

    			  jQuery.ajax({
    				url: "{:url('Admin/Shop/addPost')}",
    				type: "post",
    				dataType: "json",
    				async: true,
    				data: data.field,
    				success: function(data){
    					if(data.code == 1){

    						layer.alert(data.msg, {icon: 6},function () {
    							// 获得frame索引
    							var index = parent.layer.getFrameIndex(window.name);
    							//关闭当前frame
    							parent.layer.close(index);
    						});
    					}else{
    						layer.msg(data.msg,{icon: 5,time:3000});
    					}

    				}
			});

            return false;
          });


        });
    </script>
  </body>

</html>